<template>
  <div>
    <div class="container1">
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">安全教育统计查询</div>
      </div>
      <el-form ref="searchObj" :inline="true" :model="searchObj" size="mini" label-width="80px" style="margin-bottom: -10px; margin-top: 10px">
        <el-form-item label="试卷名称" v-if="radioStatus == '试卷成绩统计'">
          <el-input v-model="searchObj.pagerTitle" size="mini" placeholder="请输入试卷名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="姓名" v-if="radioStatus == '人员成绩统计'">
          <el-input v-model="searchObj.name" size="mini" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="工号" v-if="radioStatus == '人员成绩统计'">
          <el-input v-model="searchObj.jobNumber" size="mini" placeholder="请输入工号" clearable></el-input>
        </el-form-item>
        <el-form-item label="部门" v-if="radioStatus == '人员成绩统计'">
          <el-input v-model="searchObj.department" size="mini" placeholder="请输入部门" clearable></el-input>
        </el-form-item>
        <el-form-item label="直属领导" v-if="radioStatus == '人员成绩统计'">
          <el-input v-model="searchObj.leader" size="mini" placeholder="请输入直属领导" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item label="公司名称" v-if="radioStatus == '人员成绩统计' || radioStatus == '试卷成绩统计'">
          <el-input v-model="searchObj.leader" size="mini" placeholder="请输入公司名称" clearable></el-input>
        </el-form-item> -->
        <el-form-item label="试卷类型" v-if="radioStatus == '试卷成绩统计'">
          <el-select v-model="searchObj.pagerType" size="mini" placeholder="请选择试卷类型" filterable>
            <el-option v-for="item in pagerTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="margin-left: 2rem">
          <el-button type="primary" size="mini" icon="el-icon-search" @click="initDataList">查询</el-button>
          <el-button @click="reset" size="mini" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="container" style="margin-top: 1rem">
      <div class="common-list-class">
        <div style="display: flex">
          <el-radio-group v-model="radioStatus" @change="radioStatusChange">
            <el-radio-button label="试卷成绩统计"></el-radio-button>
            <el-radio-button label="人员成绩统计"></el-radio-button>
          </el-radio-group>
        </div>
        <div style="display: flex">
          <el-button type="primary" size="mini" style="height: 32px; margin-left: 10px" @click="allExportClick" icon="el-icon-upload">批量导出</el-button>
        </div>
      </div>
      <!-- 查询列表 -->
      <div v-show="radioStatus == '试卷成绩统计'">
        <el-table :data="tableData" size="mini" :row-style="rowStyle" @cell-click="cellChange" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px; margin-bottom: 10px" max-height="550" border>
          <el-table-column prop="pagerTitle" label="试卷名称" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip align="center">
          </el-table-column>

          <el-table-column v-if="radioStatus == '人员成绩统计'" prop="jobNumber" label="工号" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column v-if="radioStatus == '人员成绩统计'" prop="department" label="部门" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column v-if="radioStatus == '人员成绩统计'" prop="leader" label="直属领导" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="pagerType" label="试卷类型" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              {{ pagerTypeObj[scope.row.pagerType] }}
            </template>
          </el-table-column>
          <el-table-column prop="questionNum" label="题目数量" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="openidNum" label="考试人数" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              <span style="color: #409eff; cursor: pointer; font-weight: bold">{{ scope.row.openidNum }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="answerRate" label="正确率" width="100" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.answerRate + "%" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280" align="center">
            <template slot-scope="scope">
              <el-button type="success" size="mini" icon="el-icon-upload2" @click="integralClick(scope.row)">导出成绩</el-button>
              <el-button type="primary" size="mini" icon="el-icon-upload2" @click="testpaperExport(scope.row)">试卷导出</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="radioStatus == '人员成绩统计'">
        <el-table :data="tableData" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px; margin-bottom: 10px" max-height="550" border>
          <el-table-column prop="name" label="姓名" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="identity" label="身份证" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="jobNumber" label="工号" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="department" label="部门" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="leader" label="直属领导" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="answerNum" label="答题次数" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="answerRate" label="正确率" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.answerRate + "%" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="answerPoints" label="答题积分" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="avgTime" label="平均答题时间" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">

              <el-button type="primary" size="mini" icon="el-icon-tickets" @click="detailsClick(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-row>
    </div>
    <!-- 考试详情 -->
    <el-dialog title="考试详情" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="examinationFlag" width="80%" :before-close="examinationClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">考试详情</div>
      </div>
      <div>
        <div v-if="testpaper=='试卷导出'" style="float:right;margin-bottom:10px;">
          <el-button type="primary" size="mini" icon="el-icon-upload2" @click="listExport">导出</el-button>
        </div>
        <el-table :data="tableDetailsData" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px; margin-bottom: 10px" max-height="550" border @selection-change="selectL">
          <el-table-column type="selection" width="55" v-if="testpaper=='试卷导出'">
          </el-table-column>
          <el-table-column prop="name" label="姓名" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="identity" label="身份证" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="companyName" label="所属企业" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="answerNum" label="答题次数" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="answerRate" label="正确率" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.answerRate + "%" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="answerPoints" label="答题积分" show-overflow-tooltip align="center">
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination background @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="currentPage1" :page-sizes="pageSizes1" :page-size="pagesize1" layout="total, sizes, prev, pager, next, jumper" :total="total1">
        </el-pagination>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="examinationClose">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 人员详情 -->
    <el-dialog title="人员详情" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="personFlag" width="80%" :before-close="personClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">人员详情</div>
      </div>
      <div>
        <el-table :data="tablePersonData" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px; margin-bottom: 10px" max-height="550" border>
          <el-table-column prop="pagerTitle" label="试卷名称" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="companyName" label="公司名称" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="name" label="姓名" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="identity" label="身份证号" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="score" label="分数" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="answerPoints" label="答题积分" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="answerRate" label="正确率" width="100" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.answerRate + "%" }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="personClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixin/mixin.js";
export default {
  name: "laborer",
  mixins: [mixin],
  data() {
    return {
      dataonLineListSelections: [],
      testpaper: "",
      testpaperFlag: false,
      tablePersonData: [],
      personFlag: false,
      pagerTypeObj: {
        0: "随机",
        1: "固定",
      },
      pagerTypeList: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "随机",
        },
        {
          value: "1",
          label: "固定",
        },
      ],
      openId: "",
      tableDetailsData: [],
      examinationFlag: false,
      createTime: [],
      daoruFlag: false,
      uploadHeader: {},
      radioStatus: "试卷成绩统计",
      detailsFlag: false,
      newaddFlag: false,
      pageSizes: [10, 15, 50, 100],
      pagesize: 10,
      total: 10,
      currentPage: 1,
      pageSizes1: [10, 15, 50, 100],
      pagesize1: 10,
      total1: 10,
      currentPage1: 1,
      tableData: [],
      searchObj: {},
      currentPaperId: "",
    };
  },
  created() {
    this.uploadHeader.Authorization = this.requestToken;
    this.initDataList();
  },
  methods: {
    selectL(val) {
      this.dataonLineListSelections = val;
    },
    personClose() {
      this.personFlag = false;
      this.tablePersonData = [];
    },
    examinationClose() {
      this.currentPage1 = 1;
      this.examinationFlag = false;
    },
    cellChange(row, column, cell, event) {
      console.log("row----", row);
      this.currentPaperId = row.paperId;
      // console.log("column----->:", column);
      if (column.label == "考试人数") {
        this.testpaper = "";
        this.examinationFlag = true;
        this.initDetailsList();
      }
    },
    initDetailsList() {
      let params = {
        pageNumber: this.currentPage1,
        pageSize: this.pagesize1,
        paperId: this.currentPaperId,
      };
      this.showLoading();
      this.$axios({
        method: "post",
        url: "/questions/queryOpenidCensusPageList",
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.tableDetailsData = res.data.data.list;
            this.pagesize1 = res.data.data.pageSize;
            this.total1 = res.data.data.total;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    radioStatusChange(value) {
      console.log("value--->:", value);
      this.radioStatus = value;
      this.initDataList();
    },
    integralClick(row) {
      let self = this;
      self.showLoading("操作中");
      self
        .$axios({
          method: "get",
          headers: {
            Authorization: self.requestToken,
          },
          url: `/questions/exportedNormalScoreInfo/${row.paperId}`,
          responseType: "blob",
        })
        .then((res) => {
          console.log(res);
          self.hideLoading();
          if (res.status == "200") {
            let href = window.URL.createObjectURL(new Blob([res.data]));
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = href;
            link.setAttribute("download", `${row.pagerTitle}.xlsx`);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(href);
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    initDataList() {
      let params = {
        pageNumber: this.currentPage,
        pageSize: this.pagesize,
      };
      let url = "";
      if (this.radioStatus == "试卷成绩统计") {
        url = "/questions/queryPaperCensusPageList";
        params.pagerTitle = this.searchObj.pagerTitle;
        params.pagerType = this.searchObj.pagerType;
      } else {
        url = "/questions/queryOpenidCensusPageList";
        params.name = this.searchObj.name;
        params.jobNumber = this.searchObj.jobNumber;
        params.department = this.searchObj.department;
        params.leader = this.searchObj.leader;
      }
      this.showLoading();
      this.$axios({
        method: "post",
        url: url,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.tableData = res.data.data.list;
            let paperlist = res.data.data.list;
            paperlist.forEach((item) => {
              let paperId = item.paperId;
              // console.log("item---", item);
            });
            this.pagesize = res.data.data.pageSize;
            this.total = res.data.data.total;
          } else if (res.data.code == "30002") {
            this.$router.push("/login");
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    //详情试卷导出
    listExport() {
      // console.log("paperId------>", paperId);
      let self = this;
      if (!self.dataonLineListSelections.length) {
        self.$message.error("请选择数据");
        return;
      }
      for (var i = 0; i < self.dataonLineListSelections.length; i++) {
        let listopenId = self.dataonLineListSelections[i].openId;
        let listname = self.dataonLineListSelections[i].name;
        // console.log(listopenId);
        self.showLoading("操作中");
        let paperId = self.paperId;
        // let params = {
        //   paperId: self.paperId,
        // };
        self
          .$axios({
            method: "get",
            headers: {
              Authorization: self.requestToken,
            },
            url: `/questions/exportQuestionInfoWord/${listopenId}/${paperId}`,
            responseType: "blob",
            // params: params,
          })
          .then((res) => {
            console.log("res----->", res);
            self.hideLoading();
            if (res.status == "200") {
              let href = window.URL.createObjectURL(
                new Blob([res.data], {
                  type:
                    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                })
              );
              let link = document.createElement("a");
              link.style.display = "none";
              link.href = href;
              link.setAttribute("download", `${listname}试卷导出.doc`);
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
              window.URL.revokeObjectURL(href);
            } else {
              self.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            self.hideLoading();
            self.$message.error(err);
          });
      }
    },
    //试卷导出
    testpaperExport(row) {
      // console.log("row=========");
      let paperId = row.paperId;
      this.examinationFlag = true;
      this.initDetailsList();
      this.paperId = row.paperId;
      // this.listExport(paperId);
      console.log("paperID------>", paperId);
      this.testpaper = "试卷导出";
    },
    // 批量导出
    allExportClick() {
      let self = this;
      self.showLoading("操作中");
      let url = "";
      if (self.radioStatus == "试卷成绩统计") {
        url = "/questions/exportedPaperCensusList";
      } else {
        url = "/questions/exportedOpenidCensusList";
      }
      self
        .$axios({
          method: "post",
          headers: {
            Authorization: self.requestToken,
          },
          url: url,
          responseType: "blob",
          data: {},
        })
        .then((res) => {
          console.log(res);
          self.hideLoading();
          if (res.status == "200") {
            let href = window.URL.createObjectURL(new Blob([res.data]));
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = href;
            link.setAttribute("download", `${self.radioStatus}.xlsx`);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(href);
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color:#f5f5f5;color:#626262;";
    },
    rowStyle({ row, rowIndex }) {
      let style1 = {};
      let style2 = {};
      if (rowIndex % 2 == 0) {
        style1.background = "#ffffff";
        return style1;
      } else {
        style2.background = "#f5f5f5";
        return style2;
      }
    },
    // 点击分页当前页多少数据
    handleSizeChange(val) {
      this.pagesize = val;
      this.initDataList();
    },
    handleSizeChange1(val) {
      this.pagesize1 = val;
      this.initDetailsList();
    },
    handleCurrentChange1(val) {
      this.currentPage1 = val;
      this.initDetailsList();
    },
    // 点击分页页数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initDataList();
    },
    //  重置
    reset() {
      this.searchObj = {};
      this.createTime = [];
      this.initDataList();
    },
    // 详情
    detailsClick(row) {
      this.showLoading();
      this.$axios({
        method: "get",
        url: `/questions/queryScoreByOpenid/${row.openId}`,
        headers: {
          Authorization: this.requestToken,
        },
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.personFlag = true;
            this.tablePersonData = res.data.data;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    // 详情关闭
    detailsClose() {
      this.detailsFlag = false;
    },
  },
};
</script>
<style scoped>
/* .el-switch__core:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 100%;
    transition: all .3s;
    width: 16px;
    height: 16px;
    background-color: #fff;
  }
  .el-switch.is-checked .el-switch__core:after {
    left: 100%;
    margin-left: -17px;
  } */
.common-title-flex {
  display: flex;
}
.common-title-div {
  width: 3px;
  height: 16px;
  background-color: #368af7;
  margin-top: 2px;
}
.common-title-text {
  margin-left: 4px;
  font-size: 14px;
}
.common-list-class {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
}
.upload-file >>> .el-upload--text {
  border: none;
  width: 120px;
  height: 32px;
}
</style>>